<template>
  <div class="cnode-new">
    <div class="cnode-select-tab">
      分类:
      <select class="select-tab" v-model="tab">
        <option v-for="tab of tabs" :value="tab.value" :key="tab.value">
          {{ tab.name }}
        </option>
      </select>
      <button class="submit-new" @click="submit">提交</button>
    </div>
    <div class="cnode-new-title-box">
      <input v-model="title" class="cnode-new-title" placeholder="标题">
    </div>
    <div class="cnode-new-content">
      <textarea v-model="content" :placeholder="placeholder"></textarea>
    </div>
  </div>
</template>
<script>
import { SET_TAB } from '@/store/appShell/common'
export default {
  data() {
    return {
      tab: 'ask',
      title: '',
      content: '',
      placeholder: '点击输入，内容支持 Markdown',
      tabs: [
        {
          name: '问答',
          value: 'ask'
        },
        {
          name: '分享',
          value: 'share'
        },
        {
          name: '招聘',
          value: 'job'
        },
        {
          name: "开发",
          value: 'dev'
        }
      ]
    }
  },
  mounted(){
    this.$store.commit(`appShell/common/${SET_TAB}`, 'new')
  },
  methods: {
    submit() {
      if (this.content) {
        this.$store.dispatch('new', {

        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
$main-color: #1b76cf;
.cnode-new {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
}
.cnode-select-tab {
  padding: 0 16px;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  .select-tab {
    flex: 1;
    padding: 2px 4px;
    outline: none;
    border-radius: 2px;
    border: 1px solid #aaa;
    -webkit-appearance: menulist;
    margin-left: 10px;
    margin-right: 10px;
  }
  .submit-new {
    color: #fff;
    padding: 3px 6px;
    border-radius: 2px;
    background: $main-color;
  }
}
.cnode-new-title-box {
  margin: 16px 16px 0;
  padding-top: 16px;
  border-top: 1px solid #e1e1e1;
  input {
    border: 1px solid #aaa;
    width: 100%;
    height: 30px;
    border-radius: 2px;
    padding: 0 6px;
    outline: none;
  }
}
.cnode-new-content {
  flex: 1;
  padding: 16px;
  box-sizing: border-box;
  textarea {
    width: 100%;
    height: 100%;
    outline: none;
    resize: none;
    padding: 10px 0;
    border-top: 1px solid #e1e1e1;
    border-bottom: 1px solid #e1e1e1;
  }
}
</style>
